<template>
  <div class="detail" v-if="Datails">
   <div class="detail_main">
    <van-swipe :autoplay="3000" height="280" position="relative">
      <van-swipe-item v-for="item in Datails.photo" :key="item.id">
        <img v-lazy="item.url" style="width: 100%;" />
      </van-swipe-item>
    </van-swipe>
      <div class="detail_main_buttom">
        <div class="detail_buttom_one">
          <span>￥{{Datails.price}}</span> <b>￥{{Datails.tbOriginPrice}}</b>
        </div>
        <div class="detail_title">{{Datails.title}}</div>
      </div>
      <!-- 第一个li -->
    <ul>
     <li class="explain" >
       <span>服务说明</span>
        <p>
          <section class="explain_one">
              <i class="iconfont">&#xe661;</i>
              <span>产地直发</span>
          </section>
          <section class="explain_one">
              <i class="iconfont">&#xe661;</i>
              <span>售后服务</span>
          </section>
          <section class="explain_one">
              <i class="iconfont">&#xe661;</i>
              <span>售后服务</span>
          </section>
        </p>
        <i class="iconfont" id="rightImg">&#xe665;</i>
     </li>
     <!-- 第二个 -->
     <li class="selection" @click.stop="showModels(1)">
      <span>选择规格</span>
      <i class="iconfont" id="selection_rightImg">&#xe665;</i>
     </li>
     <!-- 第三个li -->
     <li class="address">
       <span>送至</span>
       <div class="address_right">
         <p>成都市 金牛区 华侨城</p>
         <div class="time"> &nbsp;  16：00前完成订单，预计明日（12月5日）送达</div>
       </div>
     </li>
    </ul>
     <!-- 图片详情 -->
   <div class="xq">
      <p>商品详情</p>
      <div class="bigbox" :key="content.photo.id" v-for="content in Datails.descContentList">
        <img :src="content.photo.url" alt="">
      </div>
   </div>
   </div>
   <div class="footer">
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" dot  @click="go_massage"/>
          <van-goods-action-icon @click="goCart" icon="cart-o" text="购物车" :badge="cartNum" />
          <van-goods-action-button type="warning" text="加入购物车" @click.stop="showModels(2)"/>
          <van-goods-action-button type="danger" text="立即购买" @click.stop="showModels(3)" />
        </van-goods-action>
   </div>
      <!-- 遮罩层 -->
      <van-overlay :show="showModel" @click.stop="cancelModel" >
        <div class="wrapper" @click.stop><!--点不动是这个地方导致的 @click.stop这个东西阻止了点击事件-->
          <div class="block">
            <div class="ret">
              <i class="iconfont" @click="close">&#xe6d5;</i>
            </div>
            <div class="block_top">
              <img :src="Datails.image" alt="" >
              <div class="block_top_left">
                <p>{{Datails.title}}</p>
                <div class="stock">库存{{Datails.saleNum}}件</div>
                  <section>
                    <span>￥ {{Datails.price*Datails.nums |fix}}</span>
                    <b>均码</b>
                  </section>
                </div>
              </div>
              <div class="block_center">
                <p>购买数量</p>
                <!-- 第四步：绑定点击事件 -->
                <div class="block_center_left" @click="handleNums('-')">-</div>
                <!-- 第三步：绑定数量 -->
                <span class="allTotal">{{Datails.nums}}</span>
                <div class="block_center_right" @click="handleNums('+')">+</div>
              </div>
              <div class="block-buttom" id="go_all" v-if="clickActive === 1">
                <div class="block-buttom_one" @click="handleAdd(Datails)">加入购物车</div>
                <div class="block-buttom_two"  @click="buyNow(Datails)">立即购买</div>
              </div>
              <div class="block-buttom" id="go_cart" v-if="clickActive === 2">
                <div class="block-buttom_one"  @click="handleAdd(Datails)">加入购物车</div>
              </div>
              <div class="block-buttom" id="go_buy" v-if="clickActive === 3">
                <div class="block-buttom_two"  @click="buyNow(Datails)">立即购买</div>
              </div>
          </div>
        </div>
      </van-overlay>
  </div>
</template>

<script>
import { getDetail } from '@/api/detail'
export default {
  name: 'detail',
  data() {
    return {
      clickActive: 1,
      showModel: false,
      Datails: null,
    }
  },
  computed: {
    cartNum() {
      return this.$store.getters['cart/total']
    },
    hasAddress() {
      return this.$store.state.address.addressInfo.length
    },
  },
  created() {
    this.getDatails()
  },
  methods: {
    go_massage() {
      this.$router.push({ path: '/news' })
    },
    // 第五步：数量点击事件回调
    handleNums(e) {
      // if (e === '-' && this.Datails.nums === 1) {
      //   this.Datails.nums = 1
      //   return false
      // }
      if (e === '-' && this.Datails.nums > 1) {
        this.Datails.nums = this.Datails.nums - 1
        return false
      }
      if (e === '+') {
        this.Datails.nums = this.Datails.nums + 1
        return false
      }
    },
    buyNow(data) {
      const login = JSON.parse(localStorage.getItem('personalCenter')) || []
      if (login.length === 0) {
        this.$router.push({ path: '/mine' })
      } else {
        if (this.hasAddress) {
          const buyData = [{
            id: data.id,
            checked: true,
            title: data.title,
            price: data.price,
            image: data.image,
            num: data.nums,
            inOrder: true,
          }]
          localStorage.setItem('cart', JSON.stringify(buyData))
          localStorage.setItem('money', JSON.stringify(data.price * data.nums))
          this.$router.push({ path: '/placeorder' })
        } else {
          this.$toast({
            type: 'fail',
            message: '还没有收货人呢',
          })
          setTimeout(() => {
            this.$router.push('/add')
          }, 1000)
        }
      }
    },
    showModels(e) {
      this.clickActive = e
      this.showModel = true
    },
    async getDatails() {
      // 这个变量，用res去声明，不要用detail 会出问题，刚刚那个就是呢变量重复导致的，变量名跟你的接口的方法名重复了
      const { detail: res } = await getDetail(this.$route.query.id)

      // 这个地方拿到的是接口返回的数据。这个地方人为处理一下
      // 第一步，手动往返回的数据中新增一个变量，用于保存新增/减少的数量
      res.nums = 1 // 第二步：默认值为1
      this.Datails = res
      console.log(res)
    },
    close() {
      this.showModel = false
    },
    goCart() {
      this.$router.push({ path: '/cart' })
    },
    handleAdd(data) {
      const login = JSON.parse(localStorage.getItem('personalCenter')) || []
      if (login.length === 0) {
        this.$router.push({ path: '/mine' })
      } else {
        const cartData = {
          id: data.id,
          title: data.title,
          price: data.price,
          image: data.image,
          num: data.nums,
          inOrder: false,
        }

        this.$store.dispatch('cart/addCartAsync', cartData)
        this.$toast({
          type: 'success',
          message: '加入成功',
        })
        this.showModel = false
      }
    },
    // 数量减
    // subNum() {

    // },
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: "iconfont"; /* Project id 3284801 */
  src: url("//at.alicdn.com/t/font_3284801_9jtz562tnna.woff2?t=1648567688386")
      format("woff2"),
    url("//at.alicdn.com/t/font_3284801_9jtz562tnna.woff?t=1648567688386")
      format("woff"),
    url("//at.alicdn.com/t/font_3284801_9jtz562tnna.ttf?t=1648567688386")
      format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 25px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.detail {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  .detail_main {
    width: 100%;
    height: 200px;
    .detail_img {
    }
    .detail_main_buttom {
      height: 80px;
      margin-bottom: 20px;
      .detail_buttom_one {
        height: 40px;
        display: flex;
        margin-top: 10px;
        span {
          font-family: "微软雅黑 Bold", "微软雅黑";
          font-weight: 700;
          color: #f04844;
          font-size: 18px;
          display: flex;
          align-items: center;
          margin-left: 20px;
        }
        b {
          font-family: "微软雅黑";
          font-weight: 410;
          font-size: 16px;
          color: #cccccc;
          display: flex;
          align-items: center;
          margin-left: 10px;
        }
      }
      .detail_title {
        width: 280px;
        height: 40px;
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: 20px;
        display: flex;
        align-items: center;
      }
    }
  }
}
ul {
  height: 130px;
  border: 1px solid #dedede;
  .explain {
    height: 44px;
    border-bottom: 1px solid #dedede;
    display: flex;
    align-items: center;
    color: #999999;
    span {
      width: 60px;
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
    p {
      width: 250px;
      height: 100%;
      display: flex;
      align-items: center;
      .explain_one {
        width: 70px;
        margin-right: 10px;
        display: flex;
        // align-items: center;
        i {
          font-size: 18px;
          color: #ffa847;
        }
        span {
          display: flex;
          margin: 0;
        }
      }
    }
    #rightImg {
      font-size: 35px;
      color: #999999;
    }
  }
  .selection {
    height: 38px;
    border-bottom: 1px solid #dedede;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999999;
    span {
      width: 60px;
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
    #selection_rightImg {
      font-size: 35px;
      color: #999999;
      margin-right: 10px;
    }
  }
  .address {
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999999;
    span {
      width: 40px;
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
    .address_right {
      width: 265px;
      height: 100%;
      p {
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .time {
        display: flex;
        align-items: center;
        box-sizing: border-box;
      }
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .block {
    width: 335px;
    height: 400px;
    background-color: #fff;
    .ret {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: end;
      margin-right: 20px;
      i {
        width: 20px;
        height: 20px;
        color: #1abc9c;
      }
    }
    .block_top {
      height: 100px;
      display: flex;
      img {
        width: 100px;
        height: 100px;
        margin-left: 20px;
      }
      .block_top_left {
        margin-left: 15px;
        height: 100px;
        p {
          color: #666666;
          font-size: 14px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .stock {
          margin-top: 30px;
          color: #aeaeae;
          font-size: 12px;
        }
        section {
          margin-top: 15px;
          display: flex;
          align-items: center;
          span {
            width: 100px;
            color: #f04844;
            font-size: 13px;
          }
          b {
            width: 150px;
            color: #aeaeae;
            font-size: 12px;
            font-weight: 300;
          }
        }
      }
    }
    .block_center {
      height: 80px;
      margin-top: 30px;
      font-size: 18px;
      color: #999999;
      display: flex;
      align-items: center;
      P {
        width: 160px;
        height: 25px;
        margin-left: 20px;
      }
      .block_center_left {
        width: 30px;
        height: 30px;
        font-weight: 900;
        border-radius: 50%;
        background-color: #1abc9c;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      span {
        width: 70px;
        height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .block_center_right {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #1abc9c;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    #go_all {
      height: 100px;
      display: flex;
      align-items: center;
      .block-buttom_one {
        width: 145px;
        height: 45px;
        border-radius: 30px;
        background-color: #1abc9c;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
      }
      .block-buttom_two {
        width: 145px;
        height: 45px;
        border-radius: 30px;
        background-color: #ffa847;
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    #go_cart{
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
      .block-buttom_one {
        width: 145px;
        height: 45px;
        border-radius: 30px;
        background-color: #1abc9c;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
      }
    }
    #go_buy{
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      .block-buttom_two {
        width: 145px;
        height: 45px;
        border-radius: 30px;
        background-color: #ffa847;
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.xq {
  width: 100%;
  margin-top: 15px;
  p {
    font-size: 13px;
    color: #333333;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
  }
  .bigbox {
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    img {
      width: 335px;
      margin-bottom: 8px;
    }
  }
}
</style>
